<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a">
  <div style="background-color: red;width: 500px;height: 500px;" @click="clk2">
    <div style="background-color: blue;width: 400px;height: 400px" v-on:click.stop="clk1()">
      <div style="background-color: yellow;width: 300px;height: 300px"
      v-on:click="nums++">
          {{nums}}
      </div>

    </div>
  </div>



  <h3>按键后缀</h3>
  <input @keypress.enter="alert('enter')"><br>
  <input @keypress.13="alert('13')"><br>

  <h3>阻止默认行为</h3>
  <form action="https://www.baidu.com">
    <button @click="alert('未阻止提交')">提交</button>
    <button @click.prevent="alert('阻止提交')">提交</button>
  </form>
</div>
<script>
  var v = new Vue({
    el:"#a",
    data:{
      nums:0,

    },
    methods:{
      clk1(){
        alert("div1");
      },
      clk2(){
        alert("div2");
      },
    }
  });
</script>
</body>
</html>